<div class="content-section introduction">
    <div>
        <span class="feature-title">Editor</span>
        <span>Editor is rich text editor component based on Quill.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Default</h3>
    <p-editor [(ngModel)]="text1" [style]="&#123;'height':'320px'&#125;"></p-editor>
    <p>Value: {{text1||'empty'}}</p>
    
    <button pButton type="button" label="Clear" icon="fa-close" (click)="text1=null"></button>
    
    <hr style="border-top:0px;border-color:#dde3e6">
    
    <h3>Custom Toolbar</h3>
    <p-editor [(ngModel)]="text2" [style]="&#123;'height':'320px'&#125;">
        <p-header>
            <span class="ql-formats">
                <button class="ql-bold" aria-label="Bold"></button>
                <button class="ql-italic" aria-label="Italic"></button>
                <button class="ql-underline" aria-label="Underline"></button>
            </span>
        </p-header>
    </p-editor>
    <p>Value: {{text2||'empty'}}</p>
    
    <button pButton type="button" label="Clear" icon="fa-close" (click)="text2=null"></button>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;EditorModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Two-way value binding is defined with ngModel.</p>
            
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-editor [(ngModel)]="text" [style]="&#123;'height':'320px'&#125;"&gt;&lt;/p-editor&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class EditorDemo &#123;
    
    text: string;
        
&#125;
</code>
</pre>

            <h3>Model Driven Forms</h3>
            <p>Editor can be used in a model driven form as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-editor formControlName="description" [style]="&#123;'height':'320px'&#125;"&gt;&lt;/p-editor&gt;
</code>
</pre>

            <h3>Toolbar</h3>
            <p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-editor [(ngModel)]="text2" [style]="&#123;'height':'320px'&#125;"&gt;
    &lt;p-header&gt;
        &lt;span class="ql-format-group"&gt;
            &lt;span title="Bold" class="ql-format-button ql-bold"&gt;&lt;/span&gt;
            &lt;span class="ql-format-separator"&gt;&lt;/span&gt;
            &lt;span title="Italic" class="ql-format-button ql-italic"&gt;&lt;/span&gt;
            &lt;span class="ql-format-separator"&gt;&lt;/span&gt;
            &lt;span title="Underline" class="ql-format-button ql-underline"&gt;&lt;/span&gt;
            &lt;span class="ql-format-separator"&gt;&lt;/span&gt;
            &lt;span title="Strikethrough" class="ql-format-button ql-strike"&gt;&lt;/span&gt;
        &lt;/span&gt;
    &lt;/p-header&gt;
&lt;/p-editor&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the container.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the container.</td>
                        </tr>
                        <tr>
                            <td>placeholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Placeholder text to show when editor is empty.</td>
                        </tr>
                        <tr>
                            <td>readonly</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to instantiate the editor to read-only mode.</td>
                        </tr>
                        <tr>
                            <td>formats</td>
                            <td>string[]</td>
                            <td>null</td>
                            <td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td>
                        </tr>
                        
                    </tbody>
                </table>
            </div>
            
            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onTextChange</td>
                            <td>event.delta: Representation of the change.<br>
                                event.source: Source of change. Will be either "user" or "api".<br>
                                event.htmlValue: Current value as html.<br>
                                event.textValue: Current value as text.<br></td>
                            <td>Callback to invoke when text of editor changes.</td>
                        </tr>
                        <tr>
                            <td>onSelectionChange</td>
                            <td>event.range: Object with index and length keys indicating where the selection exists.<br>
                                event.oldRange: Object with index and length keys indicating where the previous selection was..<br>
                                event.source: Source of change. Will be either "user" or "api".</td>
                            <td>Callback to invoke when selected text of editor changes.</td>
                        </tr>
                        <tr>
                            <td>onInit</td>
                            <td>event.editor: Quill editor instance.<br>
                                event.oldRange: Object with index and length keys indicating where the previous selection was..<br>
                                event.source: Source of change. Will be either "user" or "api".</td>
                            <td>Callback to invoke after editor is initialized.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>

            <h3>Methods</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>getQuill</td>
                            <td>-</td>
                            <td>Returns the underlying quill instance.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-editor-container</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>ui-editor-toolbar</td>
                            <td>Toolbar of the editor</td>
                        </tr>
                        <tr>
                            <td>ui-editor-content</td>
                            <td>Editable area</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p><a href="http://quilljs.com">Quill</a> Editor 1.0.</p>
            <p>Resources of quill needs to be added to your application. Example setup with CLI is as follows;</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
npm install quill --save
</code>
</pre>
            <p>Add Quill to scripts in angular-cli.json</p>  
<pre>
<code class="language-markup" pCode ngNonBindable>
"scripts": [... "../node_modules/quill/dist/quill.js"],
</code>
</pre>
            <p>Add Quill css to styles in angular-cli.json</p>  
<pre>
<code class="language-markup" pCode ngNonBindable>
"styles": [ ... "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css"],
</code> 
</pre>        

        </p-tabPanel>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/editor" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;p-editor [(ngModel)]="text1" [style]="&#123;'height':'320px'&#125;"&gt;&lt;/p-editor&gt;
&lt;p&gt;Value: &#123;&#123;text1||'empty'&#125;&#125;&lt;/p&gt;

&lt;button pButton type="button" label="Clear" icon="fa-close" (click)="text1=null"&gt;&lt;/button&gt;

&lt;hr style="border-top:0px;border-color:#dde3e6"&gt;

&lt;h3&gt;Custom Toolbar&lt;/h3&gt;
&lt;p-editor [(ngModel)]="text2" [style]="&#123;'height':'320px'&#125;"&gt;
    &lt;p-header&gt;
        &lt;span class="ql-formats"&gt;
            &lt;button class="ql-bold" aria-label="Bold"&gt;&lt;/button&gt;
            &lt;button class="ql-italic" aria-label="Italic"&gt;&lt;/button&gt;
            &lt;button class="ql-underline" aria-label="Underline"&gt;&lt;/button&gt;
        &lt;/span&gt;
    &lt;/p-header&gt;
&lt;/p-editor&gt;
&lt;p&gt;Value: &#123;&#123;text2||'empty'&#125;&#125;&lt;/p&gt;

&lt;button pButton type="button" label="Clear" icon="fa-close" (click)="text2=null"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Component&#125; from '@angular/core';

@Component(&#123;
    templateUrl: './editordemo.html'
&#125;)
export class EditorDemo &#123;

    text1: string = '&lt;div&gt;Hello World!&lt;/div&gt;&lt;div&gt;PrimeNG &lt;b&gt;Editor&lt;/b&gt; Rocks&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;';
    
    text2: string;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>